<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易的新闻列表</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        body{
            background-color: springgreen;

        }
        a{
            text-decoration: none;
            
        }
.news-wrapper{
    width: 300px;
    height: 358px;
    /* 设置居中 */
        margin: 50px auto;
    background-color:white;
    border-top: 1px solid #ddd;
}
.news-title{
    padding: 10px;
    display: block;
    height: 40px;
    border-top: solid 1px red;
    /* 通过margin-top将h2上移，盖住上边框 */
    margin-top: -1px
       
}
.news-list{
    margin: 20px;
    padding-left: 14px;
}
.news-list li{
    margin-bottom: 17px;
}
.news-list li a{
    font-size: 14px;
    color: #666;
}
.news-title a{
    /* 去除下划线 */
    text-decoration: none;
    /* 设置颜色 */
    color: #404068;
    /* 设置文字加粗效果 */
    font-weight: bold;
    /*  */
}
/* 设置图片高度 */
.news.img{
    height: 150px;
}
.news.img .img-title{
    margin-top: -30px; ;
    color: #fff;
    font-weight: bold;
    padding-left: 30px;
}

    </style>
</head>
<body>
    <div class="news-wrapper">
        <!-- 创建一个标题标签 -->
        <h2 class="news-title">
            <a href="#">体育</a>
        </h2>
        <div class="news-img">
            <a href="#">
            <img src="./img/01/4.npg.webp" alt="费德勒">
      
        <!-- 创建图片标题 -->
        <h3 class="img-title">
            费德勒不满发挥 敷额头
        </h3>
             </a>
     </div>
     <ul class="news-list">
         <li>
             <a href="#">乔治，我喜欢打球</a>
         </li>
         <li>
            <a href="#">格林：已激活通</a>
        </li>
        <li>
            <a href="#">蒙圈：顶顶顶顶付</a>
        </li>
        <li>
            <a href="#">就在：单独的是单抽</a>
        </li>
     </ul>
    </div>
</body>
</html>